import React,{ useRef,useEffect,forwardRef } from "react";
import { Link, withRouter} from "react-router-dom"
import PropTypes from 'prop-types';
import "./header.scss"
function MyHeader(props,ref){
    const {fliterFn,fliterFlg,url,homeFlg} =props;
    function Header(childrenProps){
        const {history} =childrenProps;
        function callbackFn(){
            if(url){
                history.push(url)
            }else{
                history.go(-1)
            }
        }
        return(
            <header className="comm_header" ref={ref}>
                <div className={ props.children?'':'flex'}>
                {
                    props.children?
                        props.children:(
                        <>
                            <label onClick={()=>callbackFn()} className={["icon","back",props.backFlg?'':'hide' ].join(" ")}></label>
                            <h2 className="flex-1">{props.title}</h2>
                            <label onClick={(event)=>{
                            fliterFn(!fliterFlg)
                            }} className={["icon","icon-fliter","iconfont",fliterFlg?'':'hide' ].join(" ")} ></label>

                            <Link to="/" className={["icon","icon-shouye","iconfont",homeFlg?'':'hide_none' ].join(" ")}></Link>
                        </>
                    )
                } 
                </div>
            </header>  
        )
    }
    Header=withRouter(Header)
    return  <Header />
}
MyHeader=forwardRef(MyHeader)
MyHeader.displayName="MyHeader"
MyHeader.defaultProps={
    backFlg:true,
    backUrl:"",//返回的url地址
    title:"标题",
    children:'' ,
    fliterFlg:false,
    homeFlg:false,
    fliterFn:()=>{}
}
MyHeader.propTypes={
    homeFlg:PropTypes.bool,
    backFlg:PropTypes.bool,
    fliterFlg:PropTypes.bool,
    backUrl:PropTypes.string,
    title:PropTypes.string,
    children:PropTypes.node,
    fliterFn:PropTypes.func,
}
export default  MyHeader

